<button class="btn btn-info " data-toggle="modal" data-target="#Modal" id="btn-nuevo">Nuevo Rol</button><br><br>

<!-- BEGIN DATA TABLE -->
					<div class="the-box">
						<div class="table-responsive">
						<table class="table table-striped table-hover" id="datatable-example">
							<thead class="the-box dark full">
								<tr>
									<th>Nombre del Rol</th>
									<th>Descripción del Rol</th>
									<th>Opciones</th>
								</tr>
							</thead>
							<tbody>
								<?php
									foreach ($roles as $val) {
								?>
								  <tr class="odd gradeX">
									<td><?php echo ucwords($val['nombre_rol'])?></td>
									<td><?php echo $val['descripcion_rol']?></td>
								    <td class="center">
										<button class="btn btn-default btn-xs"><i   class="fa fa-pencil-square-o fa-2x" data-id_dato="<?php echo $val['id_rol'];?>" onclick="modificar(this)" data-toggle="tooltip" data-original-title="Modificar"></i></button>
										<button class="btn btn-default btn-xs"><i   class="fa fa-trash-o fa-2x " data-id_dato="<?php echo $val['id_rol'];?>" data-nombre="<?php echo $val['nombre_rol'];?>" onclick="eliminar(this)" data-toggle="tooltip" data-original-title="Eliminar"></i></button>
									</td>
								</tr>
							
								<?php }	?>
							</tbody>
						</table>
						</div><!-- /.table-responsive -->
					</div><!-- /.the-box .default -->
					<!-- END DATA TABLE -->
	
	</div><!-- /.container-fluid -->

<script type="text/javascript">

		var dir_eliminar="usuarios/eliminar_rol";
		var msj_eliminar="Realmente desea eliminar  _NOMBRE_ ?";
		var dir_nuevo="usuarios/guardar_rol";
		var dir_modificar="usuarios/datos_de_rol";

</script>